<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>英雄管理主页</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." />
              <span class="input-group-btn">
                <button class="btn btn-default" id="btn_search" type="button">搜索</button>
              </span>
            </div>
            <!-- /input-group -->
          </div>
          <!-- /.col-lg-6 -->
          <div class="col-lg-3 col-lg-offset-3">
            <!-- 添加英雄的按钮 -->
            <!-- 
              🧨调用模态框的两个属性：
                  data-toggle="modal"                 🧨 调用切换模态框功能
                  data-target="#exampleModal"         🧨 要调用哪个模态框
            -->
            <button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-success">
              添加英雄
            </button>
          </div>
        </div>
      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>头像</th>
            <th>操作区</th>
          </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody id="tbody">
          <!-- tr 是一行内容 -->
          <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td><img src="" /></td>
            <td>
              <button type="button" class="btn btn-warning">上传头像</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 上传按钮  display: none; 把按钮隐藏起来，但是点击按钮还是可以实现上传的 -->
    <input type="file" id="uploadFile" style="display: none" />

    <!-- 🧨模态框的结构 - CV过来的 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">添加英雄</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">英雄名称:</label>
                <input type="text" placeholder="请输入英雄名称" class="form-control" id="heroName" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">英雄性别:</label>
                <label><input type="radio" checked value="男" name="gender" /> 👦男</label>
                <label><input type="radio" value="女" name="gender" /> 👩‍🦰女</label>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button id="addHeroBtn" type="button" class="btn btn-primary">添加</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 🧨 必须先引入 jquery.js 再引入 bootstrap.js -->
  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.js"></script>
  <script>
    $(() => {
      function getList() {
        $.ajax({
          type: 'get',
          url: 'http://localhost:3001/hero/getHeroList',
          data: {},
          headers: {
            Authorization: localStorage.getItem('token')
          },
          success: (res) => {
            console.log('成功响应', res);
          }
        })
      }
      // 获取英雄数据
      getList()

      // 前端捕获ajax错误
      $(document).ajaxError((event, request) => {
        // console.log(request);
        if (request.responseJSON) {
          alert(request.responseJSON.msg)
        }
      })
    })
  </script>
</body>

</html>